<template>
    <view>
        <mx-popup v-model="is_pay">
            <view class="pay-pop">
                <view class="close-box" @click="close">
                    <text class="cuIcon cuIcon-close"></text>
                </view>
                <view class="title">
                    修改支付人
                </view>

                <view class="pop-body">
                    <view class="cu-form-group">
                        <view class="title">姓名</view>
                        <input placeholder="请输入姓名" name="input" type="text" class="ipt" adjust-position
                            v-model="pay_info.real_name"></input>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">身份证号</view>
                        <input placeholder="请输入身份证号" name="input" type="idcard" class="ipt" adjust-position
                            v-model="pay_info.idcard"></input>
                    </view>
                   
                    <view class="tip">
                        根据海关规定，所填写的姓名、身份证必须和支付人一致；
                    </view>
                    <view class="cu-form-group"></view>
                </view>

                <view class="cu-btn gobtn round shadow-blur" @click="savePayInfo">保存</view>
            </view>
        </mx-popup>
    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const emit = defineEmits(['update:modelValue', 'complete']);

const props = defineProps({
    modelValue: { required: true },
    sn: {
        type: String,
        default: ''
    },
    info: {
        type: Object,
        default: {}
    }
})


// 清关信息
const is_pay = ref(false)
const pay_info = ref({
    real_name: '',
    idcard: ''
})


//监听数据
watch(
    () => props.modelValue,
    (value) => {
        is_pay.value = value
    },
    { immediate: true }
);

watch(
    () => props.info,
    (value) => {
        pay_info.value = value
    },
    { immediate: true }
);

// 更新清关信息
async function savePayInfo() {
    if (!pay_info.value.real_name) {
        return proxy.$toast('请输入姓名')
    }
    if (!pay_info.value.idcard) {
        return proxy.$toast('请输入身份证号')
    }
    let res = await proxy.$api('UpdateCustomer', {
        real_name: pay_info.value.real_name,
        idcard: pay_info.value.idcard,
        order_sn: props.sn
    })
    if (res.code == 200) {
        clearCustom()
    }
}

async function clearCustom() {
	await proxy.$api('OrderClearCustomer', {
		order_sn: props.sn
	}, false, false)
    close()
    emit('complete')
}

function close() {
    is_pay.value = false
    emit('update:modelValue', is_pay.value)
}

onMounted(() => {
    is_pay.value = props.modelValue
    pay_info.value.real_name = props.info.real_name
    pay_info.value.idcard = props.info.idcard
});
</script>

<style lang="scss" scoped>
.pay-pop {
    padding: 30rpx;
    position: relative;
    background-color: #fff;
    text-align: left;

    .close-box {
        width: 80rpx;
        line-height: 80rpx;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        text-align: center;

        .cuIcon {
            font-size: 32rpx;
        }
    }

    .gobtn {
        width: 100%;
        background-color: $main_color;
        color: #fff;
        height: 90rpx;
    }

    .title {

        text-align: center;
        font-size: 30rpx;
        color: #000;
        padding-bottom: 30rpx;
    }

    .cu-form-group {
        .title {
            text-align: left;
            width: 140rpx;
        }

        .title,
        .ipt {
            font-size: 26rpx;
        }

    }

    .tip{
        border-top: 1px solid #eee;
        font-size: 24rpx;
        color: #f00;
        padding-top: 20rpx;
    }
}
</style>